<template>
	<view class="container_list PF-R">

		<view class='nav acea-row row-around' v-if="userInfo.roleId != 0">
			<view class='item' :class='orderStatus==1 ? "on": ""' @click="getStuClassInfo(1)">
				<view>待开营</view>
			</view>
			<view class='item' :class='orderStatus==2 ? "on": ""' @click="getStuClassInfo(2)">
				<view>开营中</view>
			</view>
			<view class='item' :class='orderStatus==3 ? "on": ""' @click="getStuClassInfo(3)">
				<view>已结营</view>
			</view>
		</view>
	
		<view class="class-list-item" v-for="(item, key) in list" :key="key" @click="go(item)" v-if="list.length > 0">
			<view class="item-left">
				<image :src="icon" class="img uni-ml-20"></image>
				<view class="info uni-ml-20 flex1">
					<view class="top basic-label fs30 PF-M two-line">
						<text class="d_left">课程信息：</text>
						<text class="d_right">{{item.className}}</text>
					</view>
					<view class="bottom basic-label fs30 d4141 disp flex-row center full-w">
						<view class="d_left">营期信息：</view>
						<view class="d_right">{{item.attrName}}</view>
					</view>
					<view class="top basic-label fs30 PF-M two-line">
						<text class="d_left">班级名称：</text>
						<text class="d_right">{{item.classTag}}</text>
					</view>
				</view>
			</view>
			<image class="item-right uni-mr-20"
				src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/center/arrow.png" mode="widthFix">
			</image>
		</view>

		<empty-page title="暂无班级记录" v-else></empty-page>

	</view>
</template>

<script>
	import {
		getSchool
	} from "@/api/user.js"
	import {
		getSchoolRole
	} from '@/api/user.js'
	import {
		mapGetters
	} from "vuex";
	import emptyPage from '@/components/emptyPage'
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				icon: "https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/set_pic.png",
				list: [],
				orderStatus: 1
			}
		},
		computed: mapGetters(['isLogin', 'userInfo']),

		onLoad() {
			if (this.userInfo.roleId != 0) {
				//获取这个学生的所有营期信息
				this.getStuClassInfo(1);
			} else {
				this.getData();
			}
		},

		methods: {
			go(item) {
				uni.navigateTo({
					url: `/pages/summer/class_students/index?schoolId=${item.classId}`
				})
			},


			getData() {
				this.m_show("加载中")
				getSchool({
					stuId: -1
				}).then(res => {
					this.m_hide();
					this.list = res.data;
				})
			},

			getStuClassInfo(orderStatus) {
				//查询所有的信息
				this.m_show("加载中")
				this.orderStatus = orderStatus;
				getSchoolRole({
					status: orderStatus,
					stuId: -1
				}).then(res => {
					this.m_hide();
					this.list = res.data;
				});
			}

		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F9F9F9;
	}

	.container_list {
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.class-list-item,
	.item-left,
	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.class-list-item {
		background-color: #fff;
		padding: 20rpx 0;
	}

	.item-left .img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.item-right {
		width: 24rpx;
		height: 24rpx;
	}

	.nav {
		background-color: #fff;
		border-radius: 14rpx;
		margin: 0 auto;

		.item {
			text-align: center;
			font-size: 26rpx;
			color: #282828;
			padding: 26rpx 0;
		}
		.on {
			font-weight: bold;
			position: relative;
			&::after {
				content: '';
				height: 6rpx;
				background-color: #007E51;
				position: absolute;
				bottom: 2rpx;
				left: 0;
				right: 0
			}
		}
	}
</style>